<template>
  <div class="order-main">
    <div class="top" v-show="showTop">
      <div class="left">
        <div class="dot-common" v-show="showTitle"></div><span v-show="showTitle">{{ title }}</span>
         <slot name="title"></slot>
      </div>
      <div class="right">
        <div class="header"> <slot name="header"></slot></div>
        <div class="date" v-show="showDate"><DatePicker /></div>
        <div class="search-box" v-show="showSearch">
          <div class="input"><input :placeholder="searchPlaceholder" v-model="searchText" /></div>
          <Button class="button thumb" background="#3644bf">
            <div class="button-icon">
              <img :src="publicUrl(`/images/search-white.png`)" />
            </div>
          </Button>
        </div>
      </div>
    </div>

    <div class="dir" v-show="showTop" :style="{marginBottom:showColumn ?   `.151rem` : 0 }"></div>

    <div class="dh" v-show="showColumn">
      <div
        class="dh-part thumb"
        v-for="(item, index) in columnShow"
        @click="() => clickPart(index)"
      >
        {{ item.title }}
        <div
          class="sel-bottom"
          v-show="index === activeName"
        ></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, watch } from "vue";
import DatePicker from "@/components/DatePicker/index.vue";
import Button from "@/components/Button/index.vue";
import { publicUrl } from "@/utils/util";
import { Customer, OrderData, Column } from "./interface";
import defaultData from "./default.json";

interface Props {
  platformCustomer?: Array<Customer>;  //平台客服
  showTitle?: boolean;                 //是否显示标题 
  showTop?:boolean;                    //是否显示头部
  showDate?:boolean;                   //是否显示日期
  showSearch?:boolean;                 //是否显示搜索框
  title?:string;                       //标题字符串    
  orderData?: Array<OrderData>;        //订单数据
  activeName?: number;                 //第几个栏目活跃
  showColumn?:boolean;                 //是否显示栏目
  searchPlaceholder?:string;           //搜索input
  column?: Array<Column>;              //栏目状态
}

interface ColumnShow extends Column {
  navIndex?: number;
}

const props = withDefaults(defineProps<Props>(), {
  platformCustomer: () => [],
  showTitle: false,
  showTop:true,
  showSearch:true,
  showDate:true,
  showColumn:true,
  title:"订单管理",
  searchPlaceholder:"订单搜索",
  orderData: () => [],
  column: () => defaultData,
  activeName: 0,
});

const activeName = ref<number>(props.activeName);

const searchText = ref<string>("");

watch(
  () => props.activeName,
  (newValue) => {
    activeName.value = newValue;
  }
);

const emits = defineEmits<{
  (event: "activeName:update", value: number): void;
}>();

const columnShow = ref<Array<ColumnShow>>(
  props.column.map((item: ColumnShow): ColumnShow => {
    item.navIndex = 0;
    return item;
  })
);

const clickPart = (index: number) => {
  activeName.value = index;
  emits("activeName:update", index);
};

const initSearchText = (str:string)=>{
  searchText.value = str;
}

defineExpose({initSearchText});

</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
